<template>
  <div>
    <a-row :gutter="15">

      <a-col :span="4">
        <a-button type="primary" @click="addRole">添加角色</a-button>
      </a-col>
    </a-row>

    <!--表格区域-->
    <a-table :columns="columns" :data-source="roleList" :pagination="false" row-key="roleId">


      <template #headerCell="{ column }">
        <template v-if="column.key === 'roleName'">
        <span>
          角色名称
        </span>
        </template>
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'roleName'">
          <a>
            {{ record.roleName }}
          </a>
        </template>

        <template v-else-if="column.key === 'action'">
          <!--操作列-->
          <span slot="action">
          <a @click="edit(record)">编辑</a>
          <a-divider type="vertical"/>

          <a-popconfirm
              v-if="roleList.length"
              title="Sure to delete?"
              @confirm="() => onDelete(record)"
          >
          <a>删除</a>
        </a-popconfirm>
            <a-divider type="vertical"/>
            <a @click="showSetRightsDialog(record)">权限分配</a>
        </span>
        </template>
      </template>

      <template #expandedRowRender="{ record }">
        <a-row :class="['bdbuttom',index===0?'bdtop':'']" v-for="(item,index) in record.child" :key="item.menuId">
          <!--          渲染一级权限-->
          <a-col :span="12">
            <a-tag color="blue" closable @close="onCloseTag(record,item)">
              {{ item.authName }}
            </a-tag>
            <caret-right-outlined/>
          </a-col>
          <!--          渲染二级和三级权限-->
          <a-col :span="12">
            <a-row :class="[i2===0?'':'bdtop']" v-for="(itm,i2) in item.children" :key="itm.menuId">
              <a-col>
                <a-tag color="green" closable @close="onCloseTag(record,itm)">
                  {{ itm.authName }}
                </a-tag>
              </a-col>
            </a-row>
          </a-col>
        </a-row>

      </template>
    </a-table>

    <a-pagination :current="pagination.currentPage"
                  :page-size="pagination.pageSize"
                  :total="pagination.total" show-less-items @change="onPageChange"/>

    <role-form ref="roleFormRef" @updateRoleList="updateRoleList"/>
    <edit-role-form ref="editRoleFormRef" @updateRoleList="updateRoleList"/>
    <set-right-dialog ref="setRightDialogRef"/>
  </div>
</template>

<script>
import {onBeforeMount, ref} from "vue";
import {delById, getRoleList} from "@/apis/role";
import RoleForm from "@/components/role/RoleForm";
import EditRoleForm from "@/components/role/EditRoleForm";
import {CaretRightOutlined} from '@ant-design/icons-vue'
import {delByRoleIdAndMenuId} from "@/apis/menu";
import SetRightDialog from "@/components/rights/SetRightDialog";
import {message} from "ant-design-vue";

export default {
  name: "Roles",
  components: {SetRightDialog, EditRoleForm, RoleForm, CaretRightOutlined},
  setup() {
    const columns = [{
      name: '角色名称',
      dataIndex: 'roleName',
      key: 'roleName',
    }, {
      title: '操作',
      key: 'action',
    }];

    const roleFormRef = ref()

    const roleList = ref([])

    const editRoleFormRef = ref()

    const pagination = ref({
      currentPage: 1,
      pageSize: 7,
      total: 7
    })

    const setRightDialogRef = ref()


    onBeforeMount(() => {
      getRoleList().then(res => {
        roleList.value = res.data
      })
    })

    const updateRoleList = (value) => {
      roleList.value = value;
    }

    const onPageChange = () => {

    }

    const onCloseTag = (record, row) => {
      const roleId = record.roleId;
      const menuId = row.menuId;
      delByRoleIdAndMenuId(roleId, menuId).then(res => {
        console.log(res)
      })
    }

    const addRole = () => {
      console.log(roleFormRef)
      roleFormRef.value.visible()
    }

    const edit = (row) => {
      editRoleFormRef.value.init(row)
    }

    const showSetRightsDialog = (record) => {
      setRightDialogRef.value.showDialog(record.roleId);
    }
    const onDelete = (record) => {
      const roleId = record.roleId
      delById(roleId).then(res => {
        if (res.data === true) {
          message.success("删除角色成功")
        }
      })
    }

    return {
      addRole,
      edit,
      onDelete,
      roleList,
      onPageChange,
      pagination,
      columns,
      roleFormRef,
      updateRoleList,
      editRoleFormRef,
      onCloseTag,
      showSetRightsDialog,
      setRightDialogRef,
    }
  },
}
</script>

<style scoped lang="less">
.ant-tag {
  margin: 5px 7px 7px;
}

.bdtop {
  border-top: 1px solid #eeee;
}

.bdbuttom {
  border-bottom: 1px solid #eeee;
}
</style>